<template> 
    <el-carousel v-loading="loading" :interval="5000" arrow="always" class="custom-carousel overflow-hidden rounded-0.5rem w-90% mx-auto ">
      <el-carousel-item v-for="item in picList" :key="item"  class="custom-carousel-item">
        <img class="w-full h-full rounded-0.5rem car-img" :src="item" alt="" >
      </el-carousel-item>
    </el-carousel>

</template>

<script setup lang="ts">
import img1 from '@/assets/banner02.jpg'
import img2 from '@/assets/banner03.jpg'
import img3 from '@/assets/banner04.jpg'
import img4 from '@/assets/banner05.jpg'
import img5 from '@/assets/banner06.jpg'

const picList:any  = ref([img1,img2,img3,img4,img5])
//等待加载
const loading = ref(true)
setTimeout(()=>{
  loading.value = false
},600)

</script>

<style scoped lang="scss">
.el-carousel__item:nth-child(2n) {

  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel{
  --el-carousel-arrow-font-size: 2rem;
  --el-carousel-arrow-size: 4rem;
  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
  --el-carousel-arrow-hover-background: #4f4f4fd9;
  --el-carousel-indicator-out-color: #ffffff;
}
:deep(.el-carousel__container){
  aspect-ratio: 13/5 !important;
  height: auto;
}
.custom-carousel {

  .el-carousel__arrow{

  }
  .custom-carousel-item {

    border-radius: 0.5rem;
  }  
}
.car-img{
  object-fit: cover;
}
</style>